<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"

      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <body>
        <ui:composition template="./master/MasterPage.xhtml">

            <ui:define name="content">
                <link href="css/style2.css" rel="stylesheet" type="text/css"/> 

                <div class="p102divider">
                    <div class="container_12">
                        <div class="grid_8">
                            <div class="container">
                                <ol class="breadcrumb" style="border-left: 3px solid #e54e53;margin-left: -15px;width: 615px;">
                                    <li><a style="color: #b84d45;">Event details :# #{eventLibraryDetailsController.eventLibraryDetails.eventId}</a>
                                        <h:commandButton style="margin-left: 410px;background: yellow;color: black;"  value="Invite"  type="button" class="btn btn-default invite" id="btninvite"></h:commandButton>
                                    </li>
                                </ol>
                            </div>
                            <c:choose>
                                <c:when test="#{eventLibraryDetailsController.eventLibraryDetails !=null}">
                                    <article class="article">
                                        <div class="time">
                                            <time style="width: 300px;font: 100 25px/10px 'Open Sans';" >#{eventLibraryDetailsController.eventLibraryDetails.timeCreate}</time>
                                            <div class="pl_2" style="float: left;width: 46%;border: 0px solid;height: 60px;">
                                                <h6 style="line-height: 5px;"><a href="#">#{eventLibraryDetailsController.eventLibraryDetails.name}</a></h6>
                                                <h5 style="margin-top: -9px;">Posted by admin</h5>

                                            </div>
                                        </div>
                                        <c:if test="#{eventLibraryDetailsController.eventLibraryDetails.type=='new'}">
                                            <p style="margin-left: 0px;z-index: 999; margin-top: 0px;position: absolute;"> <i  class="fa fa-bookmark fa-7x fa-fw" style="color: red ;margin-top: -50px;"></i></p>
                                        </c:if>
                                        <c:if test="#{eventLibraryDetailsController.eventLibraryDetails.status=='Join'}">
                                            <p style="margin-left: 534px;z-index: 999; margin-top: -35px;position: absolute;"> <h:commandButton class="btn btn-danger" value="Join now" action="#{eventLibraryController.registerEvent(eventLibraryDetailsController.eventLibraryDetails.eventId)}" style="border-radius: 0px;"></h:commandButton></p>
                                        </c:if>

                                        <div class="left_event_details">

                                            <img src="#{eventLibraryDetailsController.eventLibraryDetails.image}" width="615px;" alt="" />
                                            <p class="time-post" style="height: 50px;font-size: 19px;padding-top: 15px;margin-right: 5px;"><a>start:#{eventLibraryDetailsController.eventLibraryDetails.timeStart}</a>
                                                <span style="margin-left: 90px;" class="comments"><a>end:#{eventLibraryDetailsController.eventLibraryDetails.timeEnd}</a></span>	
                                            </p>
                                        </div>
                                        <div class="right_event_details">
                                            <f:view >
                                                <h:outputText  style="color: #333;" value="#{eventLibraryDetailsController.eventLibraryDetails.description}" id="opDes" escape="false"></h:outputText> 
                                            </f:view>

                                        </div>
                                    </article>

                                </c:when> 

                                <c:otherwise>
                                    <h4>error</h4>
                                </c:otherwise>
                            </c:choose>
                            <c:choose>

                                <div id="related" style="border: 0px solid ;height: 250px;padding: 5px;">
                                    <c:when test="#{eventLibraryDetailsController.eventLibraryRelated !=null}">
                                        <c:if test="#{eventLibraryDetailsController.eventLibraryRelated.size() !=0}">
                                            <h3 style="color: #e54e53;" class="section-head">RELATED POSTS</h3>
                                        </c:if>

                                        <c:forEach var="evrlt" items="#{eventLibraryDetailsController.eventLibraryRelated}">
                                            <div style="float:left;margin-right: 5px;" id="related-vl">
                                                <p class="time-start">start :#{evrlt.timeStart}
                                                </p>
                                                <a href="#" title="Tháng 8 Tuần Châu" class="image-link">
                                                    <img width="198" style="border" height="140" src="image/events/event2.jpg" class="image wp-post-image no-display appear" alt="IMG_1861" title="Tháng 8 Tuần Châu"/>
                                                </a>
                                                <div style="width: 197px;" >
                                                    <p class="time-post">end :#{evrlt.timeEnd} 
                                                        <span class="comments">
                                                            <i class="fa fa-comments-o"></i>
                                                            #{evrlt.commnetCount}
                                                        </span>	
                                                    </p>
                                                    <h2 class="title">
                                                        <!-- <h:commandLink type="submit" value="danh nhau de" id="cmlTitle" action="r"></h:commandLink>-->
                                                        <a href="EventDetail.xhtml?eventId=#{evrlt.eventId}">#{evrlt.name}</a>
                                                    </h2>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </c:when> 
                                </div>
                            </c:choose>
                            <div>

                                <div style="margin-top: -20px;">
                                    <c:choose>
                                        <c:when test="#{eventLibraryDetailsController.eventCommentList != null}">
                                            <c:if test="#{eventLibraryDetailsController.noOfRecords !=0}">
                                                <h3 class="section-head">#{eventLibraryDetailsController.noOfRecords} COMMENTS</h3>
                                            </c:if>

                                            <c:forEach var="evc" items="#{eventLibraryDetailsController.eventCommentList}">
                                                <ul class="media-list">

                                                    <li class="media">
                                                        <a class="pull-left" href="#">
                                                            <c:if test="#{evc.avartar !=null}">
                                                                <img class="media-object" src="#{evc.avartar}" height="60" width="60"/>
                                                            </c:if>
                                                            <c:if test="#{evc.avartar ==null}">
                                                                <img class="media-object" src="image/photo.png" height="60" width="60"/>
                                                            </c:if>
                                                        </a>
                                                        <div class="media-body">
                                                            <a href="#" style="float: right;">#{evc.commented}</a><br/>
                                                            <h4 class="media-heading">#{evc.username.username}</h4>

                                                            <p style="color: #31353d;">#{evc.comment}</p>
                                                        </div>
                                                    </li>
                                                    <hr/>
                                                </ul>
                                            </c:forEach>
                                        </c:when>
                                    </c:choose>
                                </div>

                            </div>



                            <div id="pagging" style="text-align: center;">
                                <h:form>
                                    <ul class="pagination">
                                        <c:if test="#{eventLibraryDetailsController.currentPages!=1}">
                                            <li><a href="EventDetails.xhtml?pages=#{eventLibraryDetailsController.pages=eventLibraryDetailsController.currentPages-1}">«</a></li>
                                        </c:if>
                                        <c:forEach begin="1" end="#{eventLibraryDetailsController.noOfPage}" var="i">
                                            <c:choose>
                                                <c:when test="#{eventLibraryDetailsController.currentPages eq i}">
                                                    <li class="active"><a>#{i}</a></li>
                                                </c:when>
                                                <c:otherwise>
                                                    <li><a href="EventDetails.xhtml?pages=#{eventLibraryDetailsController.pages=i}">#{i}</a></li>
                                                </c:otherwise>
                                            </c:choose>
                                        </c:forEach>
                                        <c:if test="#{eventLibraryDetailsController.currentPages lt eventLibraryDetailsController.noOfPage}">
                                            <li><a href="EventDetails.xhtml?pages=#{eventLibraryDetailsController.pages=eventLibraryDetailsController.currentPages+1}">»</a></li>
                                        </c:if>
                                    </ul>
                                </h:form>
                            </div>

                            <div class="">
                                <h3 class="section-head">Leave A Reply</h3>
                                <h:form id="event-details-form">
                                    <fieldset>
                                        <label class="message">
                                            <h4> <h:message id="mess" for="txtComment" style="color:red"/></h4>
                                            <h:inputTextarea id="txtComment" value="#{eventLibraryDetailsController.comment}" p:placeholder="Your Comment"  class="form-control" style="margin: 0px -407px 0px 0px; width: 615px; height: 150px;" validatorMessage="Character must be greater than 3 and less than 500" >
                                                <f:validateLength minimum="3" maximum="400" rendered="true"></f:validateLength>
                                                <f:ajax event="blur" render="mess" />
                                            </h:inputTextarea>
                                        </label>
                                        <div>
                                            <h:commandButton class="btn btn-default" id="btnReset" style="margin-right: 5px;"  value="Reset"/>
                                            <h:commandButton class="btn btn-default" action="#{eventLibraryDetailsController.doComment()}" id="btnSend"  value="Post" >
                                                <!--<f:ajax render="@form" execute="@form"></f:ajax>-->
                                            </h:commandButton>

                                        </div>
                                    </fieldset> 

                                </h:form> 
                            </div>

                        </div>
                        <div class="grid_4">
                            <h3 style="margin-left: 30px;">categories</h3>
                            <ul class="list mt2">
                                <li><a href="#"><i class="fa fa-angle-right"></i>Sed ut perspiciatis unde </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>omnis iste natus error sit </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>voluptatem accusantium </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>doloremque laudantium totam </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>rem aperiam eaque ipsa quae ab </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>illo inventore veritatis et quasi</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>architecto beatae vitae dicta </a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>sunt explicabo Nemo enim ipsam </a></li>
                            </ul>
                            <h3 style="margin-left: 30px;">ARCHIVES</h3>
                            <ul class="list">
                                <li><a href="#"><i class="fa fa-angle-right"></i>may 2014</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>april 2014</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>march</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>february</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>january 2014</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>december 2013</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>november 2013</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i>october 2013</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <c:when test="#{eventLibraryController.liste!=null}">
                    <div class="invitemain" style="display: none;background: white;width: 445px;height: 465px;background: -webkit-linear-gradient(top, rgba(251, 251, 251, 1) 0%, rgba(248, 248, 248, 1) 11%, rgba(240, 240, 240, 1) 100%);border-radius: 3px;box-shadow: 1px 1px 3px 3px rgb(219, 218, 218);border-color: rgb(211, 209, 209); position: fixed;top: 15%;z-index: 9999;margin-left: 25%;">
                        <div class="notificationheader">
                            <div class="fadeout" style="bottom: 0;
                                 left: 0;
                                 position: fixed;
                                 right: 0;
                                 top: 0;background-color: rgba(0, 0, 0, .4);z-index: -60"></div>
                            <div style="float: right"><i class="fa fa-times fa-fw inviteclose" style="color: #ccc;cursor: pointer"></i></div>
                            Invited to attend the event
                        </div>
                        <h:form>
                            <div id="invitemaincontent" style="width: 100%; height: 435px;overflow-y: scroll;overflow-x: hidden;padding-bottom: 10px;background: white;">
                                <ul>
                                    <li>
                                        <div class="input-group">
                                            <h:inputText id="txtSearch" value=""  class="form-control" style="display: block;width: 250px;"/>
                                            <span class="input-group-btn" style="display: block;">

                                                <h:commandButton id="btnSearch" class="btn btn-default"  value="Search">
                                                    <f:ajax render="@this" execute="@this"></f:ajax>
                                                </h:commandButton>
                                            </span>
                                        </div>
                                    </li>

                                    <c:forEach items="#{eventLibraryController.listEmployeeInvited(eventLibraryDetailsController.eventLibraryDetails.eventId)}" var="emp">
                                        <li style="height: 65px;"><img height="50" width="50" src="#{emp.avatar}" /><span style="font-size: 20px;font-weight: bold;margin-right: 200px;">#{emp.username}</span>
                                            <c:if test="#{emp.status=='Invite'}" >
                                                <h:commandButton value="#{emp.status}" action="#{notificationController.sendInvitedAttendEvent(emp.username, eventLibraryDetailsController.eventLibraryDetails.eventId)}" class="btn btn-default"  >
                                                    <f:ajax render="@this" execute="@this"></f:ajax>
                                                </h:commandButton>
                                            </c:if>
                                            <c:if test="#{emp.status=='Joined'}" >
                                                <h:commandButton style="background: #2b542c;color: white;" type="button" value="#{emp.status}" action="w" class="btn btn-default"  >
                                                </h:commandButton>
                                            </c:if>
                                        </li>

                                    </c:forEach>

                                </ul>
                            </div>
                        </h:form>
                    </div>
                </c:when>
            </ui:define>

        </ui:composition>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>